<template>
  <el-row :gutter="0">
    <el-col :span="24" class="video-container">
      <div class="video-mask-box">
        <div class="video-mask">
          <img
            style="
              display: block;
              width: 100%;
              object-fit: cover;
              object-position: center center;
              opacity: 1;
              transition: opacity 330ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
              border-radius: 0.3rem;
            "
            src="https://cia.hyperos.mi.com/hyperos2-homepage/opening_video_1x.png?imageMogr2/thumbnail/2000x/quality/80/format/webp"
            loading="lazy"
          />
        </div>
        <div class="video-control">
          <img
            @click="playVideo()"
            style="max-height: 1.625rem; cursor: pointer"
            src="https://cia.hyperos.mi.com/hyperos2-homepage/opening_play_icon.png?imageMogr2/thumbnail/200x/quality/80/format/webp"
          />
        </div>
      </div>
      <div
        class="video-player-box"
        :style="[{ display: diaplayVideo ? 'block' : 'none' }]"
      >
        <div class="video-player-close" @click="pauseVideo()">
          <el-icon><Close /></el-icon>
        </div>
        <video
          ref="videoElement"
          class="video-player"
          :src="videoSrc"
          :muted="false"
          :loop="true"
          :controls="true"
          :autoplay="false"
          playsinline
          webkit-playsinline
          x5-playsinline
        ></video>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const videoElement = ref<HTMLVideoElement | null>(null);

  const videoSrc = ref(
    "https://cdn-file.hyperos.mi.com/assets-hyperos2-homepage/video/opening_final_4k_c.mp4"
  );

  let diaplayVideo = ref(false);

  const playVideo = () => {
    diaplayVideo.value = true;
    if (videoElement.value) {
      videoElement.value.play();
    }
  };

  const pauseVideo = () => {
    diaplayVideo.value = false;

    if (videoElement.value) {
      videoElement.value.pause();
    }
  };
</script>

<style lang="scss" scoped>
  @use "./../../../styles/variable.scss" as *;

  .video-container {
    width: 100%;
    height: 100%;
    background: $bsBlack;
  }

  .video-mask-box {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }

  .video-mask {
    max-width: 968px;
    height: 100%;
    border-radius: 0.3rem;
    border: 1px solid hsla(0, 0%, 100%, 0.1);
  }

  .video-control {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .video-player-close {
    width: 0.125rem;
    height: 0.125rem;
    border-radius: 0.0625rem;
    position: absolute;
    top: 20px;
    right: 80px;
    z-index: 999;
    cursor: pointer;
    color: $bsWhite;
    font-size: 0.3125rem;
  }

  .video-player-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .video-player {
    width: 100%;
    height: 100%;
  }
</style>
